<template>
  <v-container fluid>
    <v-toolbar
      dense
      scroll-off-screen
      scroll-target="#bottom"
    >
    <v-menu
      offset-y
      full-width
      close-delay="100"
    >
      <v-toolbar-title slot="activator">
        <span>B&PB Report</span><v-icon>arrow_drop_down</v-icon>
      </v-toolbar-title>
        <v-list>
          <v-list-tile :to="item.to" v-for="(item, index) in items" :key="index" @click="{}">
            <v-list-tile-title v-text="item.title"></v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <div
      class="scroll-y"
      id="scrolling-techniques"
    >
      <router-view />
    </div>
    <div id="bottom">
    </div>
  </v-container>
</template>
<script>
export default {
  name: 'BPB',
  data () {
    return {
      active: null
    }
  },
  computed: {
    items () {
      return this.$store.state.global.bpb.menu
    }
  }
}
</script>
<style scoped="scoped">
.container {
  padding: 0;
}
</style>
